<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 相对路径会报404 -->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/layui/css/layui.css"
	media="all">
</head>
<body>

	<div class="demoTable">
		搜索ID：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
	</div>

	<table class="layui-hide" id="test" lay-filter="test"></table>

	<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
  </div>
</script>

	<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


	<script src="${pageContext.request.contextPath}/layui/layui.js"
		charset="utf-8"></script>

	<script>
		layui.use('table', function() {
			var table = layui.table;

			table.render({
				elem : '#test',
				url : 'studentlimit',
				toolbar : '#toolbarDemo',
				title : '用户数据表',
				width : 1100,
				cols : [ [ {
					type : 'checkbox',
					fixed : 'left'
				}, {
					unresize : true,
					field : 'sid',
					title : '学生编号',
					width : 200,
					sort : true,
					fixed : 'left'
				}, {
					field : 'studentname',
					title : '学生姓名',
					width : 200,
					edit : 'text'
				}, {
					field : 'email',
					title : '邮箱',
					width : 150,
					edit : 'text',
					templet : function(res) {
						return '<em>' + res.email + '</em>'
					}
				}, {
					field : 'studentsex',
					title : '性别',
					width : 200,
					sort : true,
					edit : 'text'
				}, {
					field : 'studentage',
					title : '年龄',
					width : 200,
					sort : true,
					edit : 'text'
				}, {
					fixed : 'right',
					title : '操作',
					toolbar : '#barDemo',
					width : 150
				} ] ],
				page : true,
				id : 'testReload'
			});

			//头工具栏事件
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'getCheckData':
					var data = checkStatus.data;
					layer.alert(JSON.stringify(data));
					break;
				case 'getCheckLength':
					var data = checkStatus.data;
					layer.msg('选中了：' + data.length + ' 个');
					break;
				case 'isAll':
					layer.msg(checkStatus.isAll ? '全选' : '未全选');
					break;
				}
				;
			});

			//监听行工具事件
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				//console.log(obj)
				if (obj.event === 'del') {
					layer.confirm('真的删除行么', function(index) {
						obj.del();
						layer.close(index);
						$.ajax({
							url : "StudentServlet",
							data : {
								"op" : "del",
								"stuid" : data.stuid
							},
							success : function(data) {
								layer.msg(data);
							}
						});
					});
				} else if (obj.event === 'edit') {

					layer.open({
						type : 2,
						title : 'layer mobile页',
						shadeClose : true,
						shade : 0.8,
						area : [ '380px', '90%' ],
						content : 'formlist.jsp', //iframe的url
						success : function(layero, index) {
							//传值到iframe界面（iframe界面有child方法）
							var iframe = window['layui-layer-iframe' + index];
							iframe.child(data)
						},
						end : function() {
							window.location.reload();//关闭iframe后刷新界面
						}
					});

					/* layer.prompt({
						formType : 2,
						value : JSON.stringify(data)
					}, function(value, index) {
						obj.update({
							email : value
						});
						layer.close(index);
					}); */
				}
			});
			var $ = layui.$, active = {
				reload : function() {
					var demoReload = $('#demoReload');
					console.log("********" + demoReload.val());
					//执行重载，找另外一个方法并传值
					table.reload('testReload', {
						//page : true,
						where : {
							content : demoReload.val()
						}
					})
				}
			};

			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';

			});
		});
	</script>

</body>
</html>